import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  SettingOutlined,
  PoweroffOutlined,
  MonitorOutlined
} from '@ant-design/icons';
import '../assets/style/index.less'
import { Layout, Menu, Modal } from 'antd';
import React, { useState } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
// 样式
import '../assets/style/nav.css'

// 下拉菜单
import { Dropdown } from 'antd';


const items = [
  {
    key: '1',
    icon: <UserOutlined />,
    label: '个人中心',
  },
  {
    key: '2',
    icon: <MonitorOutlined />,
    label: '修改密码',
  },
  {
    type: 'divider',
  },
  {
    key: '3',
    icon: <SettingOutlined />,
    label: '系统定制',
  },
  {
    type: 'divider',
  },
  {
    key: '4',
    icon: <PoweroffOutlined />,
    label: '退出登录',
  },
];
var menus;

const { Header, Sider, Content } = Layout;

export default function NavPape() {

  // 登录的用户信息
  const user = JSON.parse(localStorage.user);
  // 侧边栏点击跳转路由
  function menusClick(params) {
    console.log('1111111111', location);
    console.log('params', params);

    const subTwoKey = params.keyPath[1];
    if (subTwoKey) {
      localStorage.subTwoKey = subTwoKey
    } else {
      localStorage.removeItem('subTwoKey');
    }
    navigate(params.key)
  }
  // 动态渲染侧边栏
  function handMenus(menus) {
    return menus.map((item) => {
      const i = {
        key: item.path,
        label: item.name,
        title: item.name
      }
      if (item.children) {
        i.children = handMenus(item.children);
      }
      if (item.icon) {
        i.icon = <i className={'iconfont iconfont-' + item.icon} />
      }
      return i;
    })
  }
  //获取菜单
  const menusArray = JSON.parse(localStorage.menusArray);
  const v = handMenus(menusArray[0].children);
  menus = v;
  console.log('menus', menus);
  //侧边栏伸缩
  const [collapsed, setCollapsed] = useState(false);
  // 退出登录
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    localStorage.clear();
    navigate('/login');
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const navigate = useNavigate();
  function ClickDropdown(e) {
    console.log('2222', e.target.innerText);
    switch (e.target.innerText) {
      case '个人中心':
        navigate('/profile', { replace: true })
        break;
      case '系统定制':
        break;
      case '修改密码':
        break;
      case '退出登录':
        showModal();
      default:
        break;
    }

  }

  return (
    <Layout style={{ minHeight: '100vh' }}>

      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />

        <div className='nav-logo'>
          <img style={{ width: '32px' }} src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="logo" />
          <span style={{ verticalAlign: 'middle', fontSize: '20px', fontWeight: 'bold', color: 'white', marginLeft: '15px' }}>赤兔养车</span>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[location.pathname]}
          defaultOpenKeys={[localStorage.subTwoKey]}
          items={menus}
          onClick={menusClick}
        />
      </Sider>

      <Layout className="site-layout">

        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}

        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
          {/* 下拉菜单 */}
          <div onClick={ClickDropdown}>
            <Dropdown
              menu={{
                items,
              }}
              placement="bottom"
            >
              <div style={{ marginRight: '30px', width: '90px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
                <img src={'http://xawn.f3322.net:8002/distremote/static/avatar/' + user.avatar} style={{ width: '40px', height: '40px', borderRadius: '50%' }} />
                <div>{user.username}</div>
              </div>
            </Dropdown>
          </div>
        </Header>

        <Modal title="提示" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <h3>您确定要退出登录吗？</h3>
        </Modal>

        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet />
        </Content>

        <div style={{ display: 'flex', justifyContent: 'center', alginItems: 'center' }}>
          Copyright  2022 <a href="https://www.woniuxy.com/">admin</a>
        </div>

      </Layout>


    </Layout>
  )
}
